<template>
  <div>
    <h1>基本信息</h1>
    <el-form ref="form" :model="temp" label-width="80px" class="edit">
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品名称 :">
            <el-input v-model="temp.name" maxlength="10" show-word-limit style="width: 71%"></el-input>
          </el-form-item>
          <el-form-item label="产品线 :">
            <el-select v-model="temp.productLine" placeholder="选择产品线" clearable>
              <el-option v-for="productLine in this.property.productLines" :key="productLine.id" :value="productLine.id"
                         :label="productLine.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品类 :">
            <el-select v-model="temp.category" placeholder="选择品类" clearable>
              <el-option v-for="category in this.property.categories" :key="category.id" :value="category.id"
                         :label="category.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片 :">
            <ul class="picture_type_list">
              <li v-for="image in this.temp.productImages">
                <el-image
                  style="width: 100px; height: 100px ;margin: 3px"
                  :src="image.url"
                  >
                </el-image>
              </li>
            </ul>
<!--            <el-upload
              list-type="picture-card"
              ref="upload"
              :action= action
              :headers="myHeaders"
              :file-list="fileList"
              :show-file-list="true"
              :auto-upload="false"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <el-button type="success" @click="submitUpload" class="btnConserveAdd">上传</el-button>-->
          </el-form-item>
        </el-col>
      </el-row>

      <!--      -->
      <h1>配置信息</h1>
      <el-row>
        <el-col :span="12">
          <el-form-item label="系列 :">
            <el-select v-model="temp.series" placeholder="选择系列" clearable>
              <el-option v-for="series in this.property.serieses" :key="series.id" :value="series.id" :label="series.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="克重 :">
            <el-input-number v-model="temp.weight" :precision="2" :step="0.01" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="尺寸 :">
            <el-select v-model="temp.size" placeholder="选择尺寸" clearable>
              <el-option v-for="size in this.property.sizes" :key="size.id" :value="size.name" :label="size.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="颜色 :">
            <el-select v-model="temp.color" placeholder="选择颜色" clearable>
              <el-option v-for="color in this.property.colors" :key="color.id" :value="color.name" :label="color.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工艺 :">
            <el-select v-model="temp.technology" placeholder="选择工艺" clearable>
              <el-option v-for="technology in this.property.technologies" :key="technology.id" :value="technology.name" :label="technology.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="形状 :">
            <el-select v-model="temp.shape" placeholder="选择形状" clearable>
              <el-option v-for="shape in this.property.shapes" :key="shape.id" :value="shape.name" :label="shape.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="材质 :">
            <el-select v-model="temp.material" placeholder="选择材质" clearable>
              <el-option v-for="material in this.property.materials" :key="material.id" :value="material.name" :label="material.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成色 :">
            <el-select v-model="temp.purity" placeholder="选择成色" clearable>
              <el-option v-for="purity in this.property.purities" :key="purity.id" :value="purity.name" :label="purity.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="包装 :">
            <el-select v-model="temp.packing" placeholder="选择包装类型" clearable>
              <el-option v-for="packing in this.property.packings" :key="packing.id" :value="packing.name" :label="packing.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检验（是否包含证书） :" label-width="190px">
            <el-switch
              class="switch"
              v-model="temp.status"
              active-color="#00A854"
              active-text="有"
              :active-value="1"
              inactive-color="#F04134"
              inactive-text="无"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用途 :">
            <el-select v-model="temp.purpose" placeholder="选择用途" clearable>
              <el-option v-for="purpose in this.property.purposes" :key="purpose.id" :value="purpose.name" :label="purpose.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="增值服务 :">
            <el-select v-model="temp.service" placeholder="选择增值服务" clearable>
              <el-option v-for="service in this.property.services" :key="service.id" :value="service.name" :label="service.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="danger" @click="conserveEdit()" class="btnConserveEdit">保存修改</el-button>
      <el-button type="success" @click="closeEdit()" class="btnCloseEdit">退出</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "edit",
  props:{
    product: Object,
    property:Object,
  },
  data(){
    return {
      temp: null,
      //图片
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      myHeaders: {authorization: sessionStorage.getItem("token")},
      action: this.baseUrl+'file/upload',
      fileList:[],
    }
  },

  created() {
    console.log(this.product)
    console.log(this.property.categories)
    //深拷贝
    this.temp = JSON.parse(JSON.stringify(this.product));
    this.temp.productLine = this.temp.productLineId
    this.temp.category = this.temp.categoryId
    this.temp.series = this.temp.seriesId
    console.log(this.temp)

  },
  methods:{
    conserveEdit(){
      this.$emit('conserveEdit',this.temp);
    },
    closeEdit(){
      //触发自定义事件
      this.$emit('closeEdit');
    },
    /*handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl)
    },

    handleAvatarSuccess(res, file) {
      console.log(file)
      console.log(res.data)

    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png" || "image/jpg" || "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG/JPEG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },*/
  }
}
</script>

<style scoped>
@import "../../../assets/css/basicdata.css";
</style>
